<template>
  <main class="px-[26px] mt-[24px]">
    <exam-title>在线考试</exam-title>
    <section class="mt-[19px] flex justify-between items-center gap-[10px]">
      <div
        class="w-full h-[155.5px] rounded-[15px] items-center flex flex-col justify-center enter-x box"
        @click="toExam"
        :style="{ backgroundImage: `url(${BG})` }"
      >
        <img src="../../../assets/icon/exam_start.png" class="w-[80px]" />
        <p class="text-[24px] text-white mt-[13px]"> 考试入口 </p>
      </div>
    </section>
  </main>
</template>

<script setup lang="ts">
  import router from '@/router';
  import ExamTitle from './ExamTitle.vue';
  import BG from '@/assets/images/exam_start_bg.png';

  const toExam = () => {
    router.push({ name: 'examlist' });
  };
</script>

<style scoped>
  .box {
    background-repeat: no-repeat;
    background-size: cover;
  }
</style>
